<script setup>
import { ref } from 'vue'
import { bucketsCreateService } from '@/api/buckets'
import { useRouter } from 'vue-router'

const router = useRouter()

const form = ref()

const rules = {
  name: [{ required: true, message: '请输入桶名', trigger: 'blur' }]
}

// 创建桶
const bucketModel = ref({
  name: '',
})

const createBucket = async () => {
  await form.value.validate()
  await bucketsCreateService(bucketModel.value)
  router.push('/buckets')
}
</script>

<template>
  <mt-create-form>
    <el-form size="large" :model="bucketModel" :rules="rules" ref="form" autocomplete="off" @submit.prevent>
      <el-form-item>
        <el-icon size="30">
          <svg
            t="1732953591828"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10531"
          >
            <path
              d="M976.372585 33.986724C960.778676 12.795002 935.98836 0 909.598668 0H86.720105C60.330414 0.399844 35.540097 12.795002 19.946189 33.986724 3.552592 56.377977-3.244752 84.367044 1.553373 111.956267c20.392034 118.353768 63.175322 367.456462 97.162046 566.57868v0.399844C116.308547 780.095275 131.502612 868.460758 140.299176 919.640765c5.597813 43.183132 41.583756 75.57048 85.166732 77.169856h545.786802c43.582975-1.599375 79.568918-33.986724 85.166731-77.169856l41.183913-240.30613 0.399844-1.599375L953.581487 352.262398v-0.799688l41.183913-239.506443c4.798126-27.589223-1.599375-55.57829-18.392815-77.969543m-151.940649 674.136665h-651.745412l-12.795002-74.370949h676.935573l-12.395159 74.370949zM880.010226 381.450996H115.908703l-12.795002-74.370949h789.291683L880.010226 381.450996z"
              p-id="10532"
            ></path>
          </svg>
        </el-icon>
        <span style="font-weight: bold; margin-left: 8px">创建 Bucket</span>
      </el-form-item>
      <el-form-item label="桶名" prop="name">
        <el-input v-model="bucketModel.name" @keyup.enter="createBucket" name="name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="createBucket"
          type="default"
          color="black"
          size="large"
          style="margin-top: 20px; padding: 20px; position: absolute; right: 0"
          auto-insert-space
        >
          创建桶
        </el-button>
      </el-form-item>
    </el-form>

    <template #tip>
      <div>
        <el-icon size="30">
          <svg
            t="1732953591828"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10531"
          >
            <path
              d="M976.372585 33.986724C960.778676 12.795002 935.98836 0 909.598668 0H86.720105C60.330414 0.399844 35.540097 12.795002 19.946189 33.986724 3.552592 56.377977-3.244752 84.367044 1.553373 111.956267c20.392034 118.353768 63.175322 367.456462 97.162046 566.57868v0.399844C116.308547 780.095275 131.502612 868.460758 140.299176 919.640765c5.597813 43.183132 41.583756 75.57048 85.166732 77.169856h545.786802c43.582975-1.599375 79.568918-33.986724 85.166731-77.169856l41.183913-240.30613 0.399844-1.599375L953.581487 352.262398v-0.799688l41.183913-239.506443c4.798126-27.589223-1.599375-55.57829-18.392815-77.969543m-151.940649 674.136665h-651.745412l-12.795002-74.370949h676.935573l-12.395159 74.370949zM880.010226 381.450996H115.908703l-12.795002-74.370949h789.291683L880.010226 381.450996z"
              p-id="10532"
            ></path>
          </svg>
        </el-icon>
      </div>
      MT
      使用存储桶来组织对象。存储桶类似于文件系统中的文件夹或目录，其中每个存储桶可以容纳任意数量的对象。
    </template>
  </mt-create-form>
</template>

<style lang="scss" scoped></style>
